<template>
	<view class="wrap">
		<view class="header">
			<view class="tabs">
				<view v-for="(item, index) in renderList" :class="['tabs-item', tabIdx == index ? 'act' : '']"
					:key="item.name" @click="handleClickTab(index)">
					{{ item.name }}
				</view>

			</view>
		</view>
		<!-- 电梯统计 -->
		<elevator :pageScrollTop="pageScrollTop" :safeAreaBottom="safeAreaBottom" :childDeep="childDeep"
			v-if="renderList[tabIdx]&&renderList[tabIdx].role == 'mystatistics_elevator'">
		</elevator>

		<!-- 项目统计 -->
		<project :childDeep="childDeep" ref="project" v-if="renderList[tabIdx]&&renderList[tabIdx].role == 'mystatistics_project'"></project>

		<!-- 保养统计 -->
		<maintian :pageScrollTop="pageScrollTop" :safeAreaBottom="safeAreaBottom" :childDeep="childDeep"
			v-if="renderList[tabIdx]&&renderList[tabIdx].role == 'mystatistics_maintain'"></maintian>

		<!-- 维修统计 -->
		<repair v-if="renderList[tabIdx]&&renderList[tabIdx].role == 'mystatistics_repair'" :pageScrollTop="pageScrollTop"
			:safeAreaBottom="safeAreaBottom"></repair>

		<!-- 考勤统计 -->
		<statisticalTotal :childDeep="childDeep" ref="signTotal" v-if="renderList[tabIdx]&&renderList[tabIdx].role == 'mystatistics_sign'" />

		<!-- 合同统计 -->
		<contractTotal :childDeep="childDeep" ref="conTotal" v-if="renderList[tabIdx]&&renderList[tabIdx].role == 'mystatistics_contract'" />

		<!-- 绩效统计 -->
		<achievements :pageScrollTop="pageScrollTop" :childDeep="childDeep"
			v-if="renderList[tabIdx]&&renderList[tabIdx].role == 'mystatistics_performance'"></achievements>
		<view class="footer-block"></view>

		<!-- 日期筛选弹窗 -->
		<timeFilter> </timeFilter>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import timeFilter from './components/card-template/timeFilter.vue';
import { mapState, mapActions } from 'vuex';
import maintian from './maintain/index.vue';
import elevator from './elevator/index.vue';
import achievements from './achievements.vue';
import project from './project.vue';
import statisticalTotal from './statisticalTotal.vue';
import contractTotal from './contractTotal.vue';
import repair from './repair/index.vue';
// import Header from '@/pages/index/components/header.vue';
import { hanleToken } from '@/utils/utils.js';
export default {
	components: { elevator, project, timeFilter, maintian, statisticalTotal, contractTotal, achievements, repair },
	data() {
		return { 

			tabIdx: 0,
 
			userIds: '',
			navTitle: '',
			customDate: '',
			headerIndex: 6,
			// 是否是数据下钻模式 大于0则用下专数据
			childDeep: '', 
			// oldHeaderIndex: 2,
			pageScrollTop: '',
			safeAreaBottom: 0,
			tabList: [{
				role: 'mystatistics_elevator',
				name: '电梯'
			}, {
				role: 'mystatistics_project',
				name: '项目'
			}, {
				role: 'mystatistics_maintain',
				name: '保养'
			}, {
				role: 'mystatistics_repair',
				name: '维修'
			}, {
				role: 'mystatistics_sign',
				name: '考勤'
			}, {
				role: 'mystatistics_contract',
				name: '合同'
			}, {
				role: 'mystatistics_performance',
				name: '绩效'
			}]
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
		renderList() {
			return this.tabList.filter((item) => {
				// 过滤出有权限的菜单数组
				return this.findRoute(item.role);
			});
		}
	},
	onPageScroll(e) {
		this.pageScrollTop = e.scrollTop;
	},
	onUnload() {
		// 暂时先清除考勤统计缓存2022-09-03 下个版本会更改
		hanleToken('remove', 'statisticalSign');

		// 如果下转模式 清除当前层级缓存

		if (this.childDeep > 0) {
			uni.removeStorage({
				key: 'statistical' + (this.childDeep > 0 ? this.childDeep : ''),
				success: () => {
					console.log('清除缓存成功', this.childDeep);
				}
			});
		}
	},
	onLoad(os) {
		this.getRoutes();
		this.childDeep = os.childDeep || '';
		if (os.tabIdx) {
			this.tabIdx = os.tabIdx;
		}
		uni.getSystemInfo({
			success: (res) => {
				this.safeAreaBottom = res.screenHeight - res.safeArea.bottom;
				// console.log(this.safeAreaBottom,9999,"底部距离");
			}
		});
	},
	onShow() {
		const key = 'statistical' + (this.childDeep > 0 ? this.childDeep : '');
		uni.getStorage({
			key: key,
			success: res => {
				console.log('数据源', res);
				this.userIds = res.data.id.split(',');
				this.navTitle = res.data.title;
			},
			fail: err => {
				console.log('statistical', key, err);
			}
		});
		// if (this.tabIdx === 3) {
		// 	//考勤统计
		if (this.$refs.signTotal) {
			this.$refs.signTotal.initData();
		}

		// }
	},
	methods: {
		...mapActions('user', ['handleRreshToken', 'getRoutes']),
		handleClickTab(res) {
			this.tabIdx = res;
			hanleToken('set', 'statisticalTabIndex', res);
			if (res == 1) {
				if (this.customDate !== '') {
					this.headerIndex = 3;
					// this.customDate = this.customDate;
					console.log('重新设置headerIndex');
				}
			}
		},

	}
};
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	min-height: 100vh;
	background-color: #f0f0f0;
}

.footer-block {
	width: 100%;
	height: 120rpx;
}

.details {
	color: #0091ff;
	font-size: 26rpx;
	margin: 20rpx 0;
	text-align: right;

	text {
		width: 14rpx;
		height: 14rpx;
		display: inline-block;
		border-top: 2rpx #0091ff solid;
		border-right: 2rpx #0091ff solid;
		transform: rotate(45deg);
	}
}

.header {
	width: 100%;
	top: 0;
	left: 0;
	position: sticky;
	z-index: 98;

	.tabs {
		width: 96%;
		padding: 0 2%;
		background-color: #ffffff;
		display: flex;
		//    position: sticky;
		// z-index: 99999;
		border-bottom: 2rpx #eee solid;

		&-item {
			height: 84rpx;
			line-height: 83rpx;
			margin: 0 20rpx;
			font-size: 26rpx;
			font-weight: 400;
			border-bottom: 4rpx solid #fff;
			color: #93b1c7;
			transition: 0.4s all;
		}

		.act {
			color: #0091ff;
			font-weight: bold;
			border-color: #0091ff;
			// font-size: 30rpx;
		}
	}
}

.roleBox {
	margin: 16rpx 20rpx;
	padding: 14rpx 20rpx 14rpx 0;
	background: #fff;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.roleCard {
		border-left: 4rpx solid #0091ff;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.changeBtn {
		color: #0091ff;
		font-size: 24rpx;
		display: flex;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
}

.card {
	width: calc(100% - 40rpx);
	margin: 20rpx;
	background-color: #fff;

	&-title {
		padding: 20rpx;
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: 1rpx;
	}

	.info-view {
		width: 100%;
		display: flex;
		align-items: center;

		&-item {
			flex: 1;
			text-align: center;
			font-size: 26rpx;
			color: #999999;
			line-height: 42rpx;

			.num {
				font-size: 34rpx;
				font-weight: bold;
				color: #333;

				text {
					font-size: 30rpx;
				}
			}

			.red {
				color: #c01414;
			}
		}

		&-line {
			width: 2rpx;
			height: 60rpx;
			background-color: #eeeeee;
		}
	}

	.chartEmpty {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}
}

.red {
	color: #c01414;
}

.charts {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	// position: relative;
	.chartsContent {

		// position: relative;
		.ringTitle {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			position: absolute;
			top: 80rpx;
			left: 80rpx;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.ring {
		width: 320rpx;
		height: 320rpx;
		padding: 20rpx;
		padding-bottom: 40rpx;
		text-align: center;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #999;
		justify-content: center;
		// background-color: #ccc;
	}

	.pie {
		width: 100%;
		height: 440rpx;
		padding: 10rpx 0;
		text-align: center;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #999;
		justify-content: center;
	}

	.charts-box {
		width: 320rpx;
		height: 320rpx;
		padding: 20rpx;
		padding-bottom: 40rpx;
		position: relative;

		.ring {
			width: 320rpx;
			height: 320rpx;
			padding: 0rpx;
			padding-bottom: 0rpx;
			// background-color: #ccc;
			text-align: center;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #999;
			justify-content: center;
		}

		.init-pie {
			width: 320rpx;
			height: 320rpx;
			padding: 0rpx;
			padding-bottom: 0rpx;
			position: absolute;
			z-index: 1;
			top: 20rpx;
			left: 20rpx;
			text-align: center;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #999;
			justify-content: center;
		}
	}

	.data-lable {
		width: calc(100% - 380rpx);
		padding-right: 20rpx;

		&-info {
			width: 100%;
			display: flex;
			align-items: center;

			&-item {
				flex: 1;
				text-align: center;
				font-size: 26rpx;
				color: #999999;
				line-height: 42rpx;

				.num {
					font-size: 34rpx;
					font-weight: bold;
					color: #333;

					text {
						font-size: 30rpx;
					}
				}

				.red {
					color: #c01414;
				}

				.name {
					width: 100%;
					display: flex;
					align-items: center;
					text-align: center;
					justify-content: center;

					.color {
						// background-color: #0091FF;
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}

					.text {
						text-align: center;
						flex: 1;
					}
				}
			}

			&-item:nth-child(1) {
				padding-right: 16rpx;
				flex: none;
			}

			.line {
				width: 2rpx;
				height: 60rpx;
				background-color: #eeeeee;
			}
		}

		&-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			margin: 16rpx 0;
			color: #666666;

			.color {
				// background-color: #0091FF;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			.name {
				width: calc(100% - 160rpx - 28rpx);
				overflow: hidden;
				text-overflow: ellipsis; //文本溢出显示省略号
				white-space: nowrap; //文本不会换行
			}

			.eleTotal {
				width: 70rpx;
				text-align: center;
				text-align: right;
			}

			.num {
				width: 90rpx;
				text-align: center;
				text-align: right;
			}
		}
	}
}

.detail {
	color: #0091ff;

	display: flex;
	align-items: center;

	justify-content: flex-end;
	align-items: center;
	padding: 0 30rpx 32rpx 0;

	.next {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		margin-left: 10rpx;
		border-left: 3rpx #0091ff solid;
		border-top: 3rpx #0091ff solid;
		transform: rotate(135deg);
	}
}

.split-line {
	width: calc(100% - 40rpx);
	height: 2rpx;
	background-color: #eeeeee;
	margin: 0 auto;
}
</style>
